<template>
    <div>
         <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>图片</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in shopcartList" :key="item.id">
                    <td>
                    <td>
                        <input type="checkbox" v-model="item.isChecked">
                    </td>
                    <td><img :src="item.pic" width="80px"></td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button class="btn" @click="changeNum('-',index)">-</button>
                        <input type="text" class="inputNum" v-model="item.num">
                        <button class="btn" @click="changeNum('+',index)">+</button>
                    </td>
                    <td>{{item.xiji}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="7">
                        <input type="checkbox" v-model="selAll">
                        <span>全选</span>
                        <span>
                            总价:{{totalPrice}}
                        </span>
                        <span>
                            <button>结算{{totalCount}}</button>
                        </span>
                    </td>
                </tr>
            </tfoot>
         </table>
    </div>
</template>

<script>
export default {
  watch:{
    shopcartList:{
      deep:true,
      handler(newval){
        console.log(newval);
      }
    }
  },
  computed:{
    totalPrice(){
        return this.shopcartList.filter(item=>item.isChecked).reduce((prev,cur)=>prev+cur.price*cur.num,0).toFixed(2)
    },
    totalCount(){
        return this.shopcartList.filter(item=>item.isChecked).reduce((prev,cur)=>prev+cur.num,0)
    },
    selAll:{
        get(){
            return this.shopcartList.every(item=>item.isChecked)
        },
        set(arg){
           if(arg){
             this.shopcartList.forEach(item=>{
                item.isChecked=true
             })
           }else{
              this.shopcartList.forEach(item=>{
                item.isChecked=false
             })
           }
        }
    }
  },
  methods:{
    changeNum(flag,index){
       switch(flag){
        case '-':
            if(this.shopcartList[index].num>1){
                this.shopcartList[index].num--
            }else{
                alert('数量不能小于1')
            }
            break
        case '+':
            this.shopcartList[index].num++
            break
       }
    }
  },
  data() {
    return {
      shopcartList: [
        {
          id: "1001",
          pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa9303878-c54d-4712-b3ca-26473144447d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706758650&t=e9d97e673da7cff6f3052ceb2e56d88c",
          name: "苹果",
          price: 5.8,
          num: 2,
          isChecked: true,
        },
        {
          id: "1002",
          pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2d093cd6-a943-486d-8c62-2a16020a1dae%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706758650&t=62a04d7403aa4ef7c6fe4445a421af54",
          name: "芒果",
          price: 6.8,
          num: 1,
          isChecked: false,
        },
        {
          id: "1003",
          pic: "https://img1.baidu.com/it/u=1967486422,2850646429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707",
          name: "草莓",
          price: 10.8,
          num: 1,
          isChecked: true,
        },
      ],
    };
  },
};
</script>

<style>
table {
  width: 700px;
  border-collapse: collapse;
}
td,
th {
  border: 1px solid #000;
  padding: 5px;
  text-align: center;
}
.btn {
  width: 25px;
  height: 25px;
  border: none;
  background-color: skyblue;
}
.inputNum {
  height: 20px;
  width: 50px;
  text-align: center;
}
</style>